#header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: all linear 0.4s;

    .navbar {
        border-radius: 0px;
        margin-bottom: 0px;
        background-color: #111111;
    }

    .container {
        width: 80%;
    }

    .logo {
        color: white;
        text-transform: uppercase;
        font-family: OSBold;
        line-height: 30px;
        font-weight: bolder;
    }

    .nav li a {
        color: white;
        text-transform: uppercase;
        line-height: 30px;
        height: 60px;
        border-bottom: 3px solid transparent;
        transition: all linear .3s;

        &:hover {
            border-bottom: 3px solid #fcac45;
        }
    }

    @media screen and (max-width:1050px) {
        .container {
            width: 95%;
        }
    }

    @media screen and (max-width:780px) {
        .logo {
            line-height: 20px;
        }

        .nav li a {
            text-align: center;
        }
    }
}

/* banner背景 */
.banner {
    width: 100%;
    height: 1000px;
    position: relative;
    left: 0;
    top: 0;
    overflow: hidden;
    background: url(../images/R-C.jpg) no-repeat;
    background-size: auto;

    .box {
        text-align: center;
        height: auto;
        width: 100%;
        font-size: 3em;
        margin: 6.5em auto;
        position: absolute;
        top: 0;

        .title {
            font-size: 1em;
            color: #ffffff;
            text-transform: uppercase;
            font-family: OSLight;

            span {
                color: #fcac45;
                font-family: OSBold;
            }
        }

        .info {
            font-size: .5em;
            color: #ffffff;
            font-family: OSLight;

            span {
                font-family: OSBold;
            }
        }

        .more {
            height: 1.3em;
            width: 1.3em;
            border: 1px solid #ffffff;
            border-radius: 50%;
            margin: 6em auto;
            transition: all linear .3s;

            a {
                width: 100%;
                height: 100%;
                color: #ffffff;
                font-size: .6em;
                font-family: OSBlod;
                text-decoration: none;
                transform: translateY(-10px);
            }

            &:hover {
                transform: translateY(-10px);
                box-shadow: 0px 0px 10px 0px #ffffff;
            }
        }

    }

    @media screen and (max-width: 700px) {
        .title {
            font-size: 0.8em;
        }
    }

    @media screen and (max-width: 435px) {
        .box {
            margin: 3em auto;

            .title {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 0.65em;
            }
        }

    }

    @media screen and (max-width: 420px) {
        .box {
            margin: 6.7em auto;
        }
    }

    @media screen and (max-width: 375px) {
        & {
            height: 500px;

            .box {
                margin: 1.5em auto;

                .more {
                    margin: 3em auto;
                }
            }
        }

    }
}

/* About */
.about {
    z-index: 999;
    width: 80%;
    height: auto;
    background-color: white;
    margin: 0 auto;
    padding: 7em 0em 4em 0em;
    display: flex;
    justify-content: space-between;

    .about-right {
        height: 450px;
        width: 40%;

        .title {
            text-align: left;

            .small {
                color: #999999;
                font-size: 2em;
                text-transform: uppercase;
            }

            .big {
                font-size: 2.5em;
                text-transform: uppercase;

                span:nth-child(1) {
                    border-bottom: 4px solid #fcac45;
                    padding-bottom: 3px;
                }

                span:nth-child(2) {
                    font-family: OSBlod;
                    font-weight: 700;
                }
            }
        }

        .resume {
            font-size: 1.3em;
            padding-top: 10px;
            font-family: OSLight;
            width: 450px;
        }

        .list {
            padding-top: 20px;
            font-size: 1.3em;
            font-family: OSLight;

            li {
                margin-bottom: 5px;
            }

            span:nth-child(2) {
                font-family: OSBlod;
            }

        }

        .box {
            width: 200px;
            height: 50px;
            border: 1px solid #999999;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            margin-top: 50px;
            border-radius: 3px;
            font-size: 1.2em;
            font-family: OSLight;
            transition: all .5s ease-in-out;
            text-transform: uppercase;

            &:hover {
                transform: translateY(-10px);
                box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.356);
            }
        }

    }

    @media screen and (max-width: 1450px) {
        .about-right {
            margin: 0 auto;
            width: 460px;

            .title {
                // 强制在一行
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
    }

    @media screen and (max-width:1150px) {
        & {
            padding: 5em 0em 2em 0em;
            width: 100%;
        }

        .about-left {
            display: none;
        }

        .about-right {
            width: 90%;

            .resume {
                width: 100%;
            }
        }
    }

    @media screen and (max-width:996px) {
        & {
            padding: 3.5em 0em 0em 0em;
        }

        .about-right {
            height: 436px;

            .box {
                margin-top: 30px;
                margin: 30px auto 0;
            }
        }
    }

    @media screen and (max-width:550px) {
        & {
            padding: 3.5em 0em 2em 0em;
        }

        .about-right .title {
            .small {
                font-size: 1.5em;
            }

            .big {
                font-size: 1.5em;
            }
        }

        .big,
        .list li {
            // 强制在一行
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

    }

    @media screen and (max-width:375px) {
        & {
            padding: 3.5em 0em 3em 0em;
        }

    }

}

// team
.team {
    width: 100%;
    height: auto;
    padding: 80px 0px 60px 0px;
    background-color: black;
    position: relative;

    .bigbox {
        width: 80%;
        height: auto;
        margin: 0px auto;
        text-align: center;

        h3 {
            font-size: 2.5em;
            text-transform: uppercase;
            color: white;
            background: url(../images/title-background.png)no-repeat bottom center;
            padding-bottom: .8em;
            margin-bottom: 2.8em;

            span {
                font-family: OSBlod;
                font-weight: bold;
            }
        }

        .four {
            width: 100%;
            height: auto;
            margin-bottom: 65px;
            display: flex;
            justify-content: space-between;

            h1 {
                color: white;
                font-family: OSBlod;
                font-size: 1.5em;
                // 强制在一行
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            h4 {
                color: white;
                font-family: OSLight;
                font-size: 1.2em;
                // 强制在一行
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            p {
                color: white;
                font-family: OSLight;
                font-size: 1.1em;
                padding-top: 15px;
            }

            .item {
                width: 20%;
                height: 100%;

                img {
                    border-radius: 50%;
                }
            }
        }

        .dots {
            height: 10px;
            width: 100%;

            .dot {
                height: 10px;
                width: 10px;
                background-color: white;
                display: inline-block;
                margin-left: 10px;

                &:hover {
                    background-color: #fcac45;
                }
            }
        }
    }



    @media screen and (max-width:1408px) {
        .team .item img {
            width: 200px;
            height: 200px;
        }
    }

    @media screen and (max-width:1270px) {
        .team .item img {
            width: 150px;
            height: 150px;
        }
    }

    @media screen and (max-width:1150px) {
        & {
            padding: 56px 0px 51px 0px;
        }

        .bigbox {
            width: 95%;

            h3 {
                line-height: 2;
                margin-bottom: 2em;
            }

            .four {
                margin-bottom: 15px;
                flex-direction: column;

                .item {
                    margin-bottom: 3em;
                    width: 100%;
                    display: flex;

                    img {
                        border-radius: 0%;
                        width: 150px;
                        height: 150px;
                    }

                    .font {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        width: 100%;
                        text-align: left;
                        margin-left: 25px;

                        h1 {
                            line-height: 0.7;
                            margin: 0px;
                            padding: 0px;
                            font-weight: unset;
                        }

                        h4 {
                            margin: 0px;
                            padding-top: 8px;

                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width:550px) {
        .bigbox h3 {
            font-size: 1.5em;
        }
    }

    @media screen and (max-width: 320px) {
        .four {
            p {
                height: 7em;
                overflow-y: scroll;
            }

            .item {
                width: 100%;
                height: 100%;

                img {
                    width: 8em;
                    height: 8em;
                }
            }
        }
    }
}

/* services */
.services {
    width: 100%;
    height: auto;

    .bigbox {
        width: 80%;
        height: auto;
        margin: 50px auto;
        text-align: center;

        .title {
            width: 100%;
            height: auto;
            margin: 0px auto;
            margin-bottom: 1.5em;

            h1 {
                text-transform: uppercase;
                font-size: 2.5em;
                font-family: OSLight;
                background: url(../images/title-background.png)no-repeat bottom center;
                padding-bottom: 0.8em;
                line-height: 2;

                span {
                    font-family: OSBlod;
                    font-weight: 700;
                }
            }
        }

        .Lorem p {
            font-size: 1.2em;
            color: #999999;
        }

        .item {
            height: auto;
            width: 100%;
            display: flex;
            justify-content: space-between;

            .one {
                padding: 50px 0;
                width: 20%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;

                .image {
                    width: 100px;
                    height: 100px;
                    border: 6px #fcac45 solid;
                    margin: 0px auto;
                    border-radius: 50%;
                    margin-bottom: 10px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                h3 {
                    text-transform: uppercase;
                    font-family: OSBlod;
                    font-weight: 600;
                    font-size: 1.5em;
                    margin-bottom: 15 px;
                }

                p {
                    font-size: 1em;
                    color: black;
                }
            }
        }

    }



    @media screen and (max-width: 1000px) {
        .bigbox {
            width: 95%;

            .item {
                flex-direction: column;

                .one {
                    width: 100%;
                    flex-direction: row;
                    text-align: left;
                    padding: 20px 0;

                    .font {
                        width: 80%;
                        padding-left: 30px;
                    }
                }
            }
        }
    }

    @media screen and (max-width:550px) {
        .bigbox .title h1 {
            font-size: 1.5em;
        }
    }

    @media screen and (max-width: 375px) {
        .bigbox {
            .title {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;

                h1 {
                    padding-bottom: 1em;
                }
            }

            .item {
                .one {

                    .image {
                        width: 80px;
                        height: 80px;
                    }
                }
            }
        }

    }

}

// CLIENTS
.CLIENTS {
    width: 100%;
    background-color: #111111;

    .bigbox {
        width: 80%;
        margin: 0px auto;
        text-align: center;
        padding: 4em 0em 3em 0em;

        .title {
            width: 100%;
            height: auto;
            margin: 0px auto;
            margin-bottom: 1.5em;

            h1 {
                text-transform: uppercase;
                font-size: 2.5em;
                font-family: OSLight;
                color: white;
                background: url(../images/title-background.png)no-repeat bottom center;
                padding-bottom: .8em;
                line-height: 2;

                span {
                    font-family: OSBlod;
                    font-weight: 700;
                }
            }
        }

        .layer {
            display: flex;
            justify-content: space-around;
            margin-top: 60px;

            img {
                width: 12em;
                margin: 20px 20px;
            }
        }

        .dots {
            height: 10px;
            width: 100%;
            margin: 60px auto;

            .dot {
                height: 10px;
                width: 10px;
                background-color: white;
                display: inline-block;
                margin-left: 10px;

                &:hover {
                    background-color: #fcac45;
                }
            }
        }
    }

    @media screen and (max-width:1150px) {
        .layer {
            flex-wrap: wrap;

            img {
                margin-top: 20px;
            }
        }
    }

    @media screen and (max-width:550px) {
        .bigbox .title h1 {
            font-size: 1.5em;
        }
    }
}

// Work
.work {
    width: 100%;

    .bigbox {
        width: 80%;
        margin: 0 auto;
        padding: 4em 0em 6em 0em;
        text-align: center;

        .title {
            margin-bottom: 1.5em;

            h1 {
                text-transform: uppercase;
                font-family: OSLight;
                background: url(../images/title-background.png)no-repeat bottom center;
                padding-bottom: 0.8em;
                line-height: 2;
                font-size: 2.5em;

                span {
                    font-family: OSBlod;
                    font-weight: 700;
                }
            }
        }

        .desc {
            font-size: 1.2em;
            color: #999999;
            margin-bottom: 5em;
        }

        .items {

            // 文字部分
            .tiemtitle {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 1.3em;
                margin-bottom: 1em;

                .left {
                    color: black;
                    text-transform: uppercase;
                }

                .right {
                    ul {
                        display: flex;
                        justify-content: center;

                        li {
                            padding: 0 1em;

                            a {
                                width: 100%;
                                color: #999999;
                                text-decoration: none;

                                &:hover {
                                    color: #000;
                                }
                            }

                            &:nth-child(n+2) {
                                border-left: 1px solid black;
                            }
                        }
                    }

                    .select {
                        display: none;
                        color: #999999;
                    }
                }
            }

            // 图片部分
            .imgbox {
                ul {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;

                    li {
                        width: 23%;
                        margin-bottom: 2em;
                        overflow: hidden;
                        position: relative;

                        img {
                            width: 100%;
                            height: 100%;
                        }

                        .mask {
                            position: absolute;
                            top: 400px;
                            width: 100%;
                            height: 100%;
                            background-color: rgba(0, 0, 0, 0.596);
                            z-index: 999;
                            transition: 1s;
                            text-align: center;

                            h1 {
                                color: white;
                                font-size: 1.5em;
                                margin-top: 2em;
                            }

                            p {
                                color: #b2b2b2;
                                font-size: 1.2em;
                                margin-bottom: 3em;
                            }

                            .plus {
                                height: 50px;
                                width: 50px;
                                line-height: 45px;
                                color: #fcac45;
                                font-size: 2.5em;
                                border: 2px solid #fcac45;
                                border-radius: 50%;
                                margin: 0 auto;
                            }
                        }

                        &:hover .mask {
                            top: 0px;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width:1270px) {
        .bigbox .items .imgbox {
            ul {
                flex-wrap: wrap;

                li {
                    width: 30%;
                }
            }
        }
    }

    @media screen and (max-width:1150px) {
        .bigbox {
            width: 95%;
        }
    }

    @media screen and (max-width:995px) {
        .bigbox .items {
            .tiemtitle {
                .right {
                    ul {
                        display: none;
                    }

                    .select {
                        display: block;
                    }
                }
            }

            .imgbox {
                ul {
                    flex-wrap: wrap;

                    li {
                        width: 45%;
                    }
                }
            }
        }
    }

    @media screen and (max-width:550px) {
        .bigbox .title h1 {
            font-size: 1.5em;
        }
    }
}

// testimonials
.testimonials {
    width: 100%;
    background-color: #000;
    padding: 4em 0em 3em 0em;
    text-align: center;

    .bigbox {
        width: 80%;
        margin: 0 auto;

        .title {
            margin: 1.5em 0;
            color: white;

            h1 {
                text-transform: uppercase;
                font-family: OSLight;
                background: url(../images/title-background.png)no-repeat bottom center;
                padding-bottom: 0.8em;
                line-height: 2;
                font-size: 2.5em;

                span {
                    font-family: OSBlod;
                    font-weight: 700;
                }
            }
        }

        .desc {
            font-size: 1.3em;
            color: #999999;
            margin: 5em 0;
            text-transform: uppercase;
            color: white;
        }

        .CEO {
            font-size: 1.3em;
            color: #999999;
            text-transform: capitalize;
            margin: 3em 0;
        }
    }

    .dot {
        height: 10px;
        width: 10px;
        background-color: white;
        display: inline-block;
        margin-left: 10px;

        &:hover {
            background-color: #fcac45;
        }
    }

    @media screen and (max-width:1150px) {
        .bigbox {
            width: 95%;
        }
    }

    @media screen and (max-width:550px) {
        .bigbox {
            width: 95%;

            .title h1 {
                font-size: 1.5em;
            }
        }
    }
}

// contact
.contact {
    width: 100%;
    padding: 4em 0;
    text-align: center;

    .bigbox {
        width: 80%;
        margin: 0 auto;

        .title {
            margin: 1.5em 0;

            h1 {
                text-transform: uppercase;
                font-family: OSLight;
                background: url(../images/title-background.png)no-repeat bottom center;
                padding-bottom: 0.8em;
                line-height: 2;
                font-size: 2.5em;

                span {
                    font-family: OSBlod;
                    font-weight: 700;
                }
            }
        }

        p {
            font-size: 1.3em;
            color: #999999;
            margin-bottom: 5em;
        }

        .form {
            width: 100%;

            .top {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                align-content: center;
                margin-bottom: 3em;

                .left,
                .right {
                    width: 48%;
                    text-align: left;

                    .name {
                        color: #999999;
                        font-size: 1.5em;

                        sup {
                            color: red;
                        }
                    }

                    input {
                        display: block;
                        width: 100%;
                        height: 3em;
                        line-height: 3em;
                        text-indent: 10px;
                    }
                }

                .right {
                    width: 48%;
                    text-align: left;

                    .email {
                        color: #999999;
                        font-size: 1.5em;

                        sup {
                            color: red;
                        }
                    }
                }
            }

            .message {
                width: 100%;
                text-align: left;
                margin-bottom: 2em;

                .name {
                    color: #999999;
                    font-size: 1.5em;

                    sup {
                        color: red;
                    }
                }

                textarea {
                    width: 100%;
                    height: 20em;
                    text-indent: 10px;
                }
            }

            .send {
                width: 100%;
                text-align: right;

                button {
                    width: 11em;
                    height: 3em;
                    line-height: 3em;
                    border: 0px;
                    background: #fcac45;
                    color: #fff;
                    font-size: 1.1em;
                    text-align: center;
                    transition: all 0.5s ease-in-out;
                    font-family: OSBold;

                    &:hover {
                        transform: translateY(-10px);
                        box-shadow: 0px 3px 10px 0px #7f7f7f;
                    }
                }
            }
        }
    }

    @media screen and (max-width:750px) {
        .bigbox {
            width: 95%;

            .title {
                h1 {
                    font-size: 1.5em;
                }
            }

            p {
                margin-bottom: 3em;
            }

            .form {
                .top {
                    width: 100%;
                    display: block;

                    .left,
                    .right {
                        width: 100%;
                        margin-bottom: 1em;
                    }
                }

                .message {
                    textarea {
                        height: 10em;
                    }
                }

                .send {
                    width: 100%;
                    text-align: center;
                }
            }
        }
    }
}

// footer
.footer {
    width: 100%;
    background-color: #000;
    color: white;
    padding: 3em 0;

    .bigbox {
        width: 80%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;

        .left {
            font-family: OSLight;
            color: #b2b2b2;
            font-size: 1.2em;
            text-transform: uppercase;
            font-weight: bold;

            span {
                font-family: OSBold;
            }
        }

        .right {
            width: 40%;
            display: flex;
            justify-content: space-evenly;

            a {
                display: inline-block;
                background: transparent;
                text-decoration: none;
                color: #08c;

                img {
                    width: 40px;
                    height: 40px;
                    border: 3px #999999 solid;
                    border-radius: 50%;
                    transition: all 0.3s linear;

                    &:hover {
                        transform: translateY(-10px);
                        box-shadow: 0px 0px 10px 0px #c3c3c3;
                    }
                }
            }
        }
    }

    @media screen and (max-width:900px) {
        .bigbox {
            width: 95%;
            display: block;

            .left {
                display: inline-block;
                width: 100%;
                text-align: center;
                margin-bottom: 2em;
            }

            .right {
                width: 100%;
            }
        }
    }
}

// up
.up {
    width: 70px;
    height: 70px;
    position: fixed;
    right: 45px;
    bottom: 45px;

    a {
        width: 100%;
        height: 100%;

        &:hover {
            animation: up 1s;
        }

        @keyframes up {
            from {
                transform: scale3d(1, 1, 1);
            }

            30% {
                transform: scale3d(1.25, 0.75, 1);
            }

            40% {
                transform: scale3d(0.75, 1.25, 1);
            }

            50% {
                transform: scale3d(1.15, 0.85, 1);
            }

            65% {
                transform: scale3d(.95, 1.05, 1);
            }

            75% {
                transform: scale3d(1.05, .95, 1);
            }

            to {
                transform: scale3d(1, 1, 1);
            }
        }
    }

    @media screen and (max-width:450px) {
        & {
            right: 1em;
            bottom: 1em;
        }
    }
}